<template>
  <div>
    <el-dialog :title='title' :visible.sync="dialogFormVisible" @closed="$emit('update:activated', false)"
               width="750px">
      <el-card>
        <div class="dialogStyle" style="display: flex;flex-direction: column">
          <el-form  class="search-form search-form-normal" label-width="110px" ref="form"
                    style="flex: 5" :model="form" size="mini" :rules="rules">
            <el-form-item :label="$t('pageTable.departureDate')" prop="departureDate">
              <el-date-picker
                v-model="form.departureDate"
                type="date"
                style="width:160px"

                value-format="yyyyMMdd">
              </el-date-picker>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item :label="$t('pageTable.packingDate')" prop="packingDate">
              <el-date-picker
                v-model="form.packingDate"
                type="date"
                style="width:160px"
                value-format="yyyyMMdd">
              </el-date-picker>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item :label="$t('pageTable.contractNo')" prop="contractNo">
              <el-input v-model="form.contractNo" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="主提单号" prop="billNo">
              <el-input v-model="form.billNo" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="船名航次" prop="vesselNameVoyage">
              <el-input v-model="form.vesselNameVoyage" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="港口" prop="port">
              <el-input v-model="form.port" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item label="目的港" prop="destinationPort">
              <el-input v-model="form.destinationPort" class="search-form-item-input" style="width:160px" size="mini"
                        :maxlength="32" clearable></el-input>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>

            <el-form-item :label="$t('pageTable.TypeOfShipping')" prop="shippingMethods">
              <el-select  v-model="form.shippingMethods" style="width: 160px" size="mini" clearable>
                <el-option value=""></el-option>
                <el-option
                  size="mini"
                  v-for="item in transportation"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value">
                </el-option>
              </el-select>
              <template slot="error" slot-scope="scope">
                <div style="float: right;margin-right: 100px;font-size: 10px;color: red">{{scope.error}}</div>
              </template>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
      <div class="dialogButton">
        <el-button type="primary" size="mini" @click="submit('form')"><i
          class="fa fa-check"></i>  {{$t('searchFrom.confirm')}}
        </el-button>
        <el-button size="mini" @click=" cancel">{{$t('searchFrom.cancel')}}</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import activityService from '@/api/warehouse/packingDetailsList'

  export default {
    name: "EditOrderPlan",
    props: {
      idsStr: {},
    },
    computed: {
      title: function () {
        let entityName = this.$t('route.warehousePackingDetailsList')
        if(this.mode === 'ADD'){return this.$t('searchFrom.add')+entityName}
        else if(this.mode === 'EDIT'){return this.$t('searchFrom.edit')+entityName}
      }
    },
    data() {
      return {
        dialogFormVisible: true,
        transportation:[],
        form: {
          contractNo:"",
          packingDate:"",
          departureDate:"",
          billNo:"",
          vesselNameVoyage:"",
          port:"",
          destinationPort:"",
          shippingMethods:"",
        },
        /**表单的验证*/
        rules: {
          contractNo: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          packingDate: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            // {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          departureDate: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            // {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          billNo: [
            {required: false, message: this.$t('Tips.checkMaterialCode'), trigger: 'blur'},
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],

          vesselNameVoyage:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          port:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          destinationPort:[
            {max: 32, message: this.$t('Tips.lentghGT32'), trigger: 'blur'},
          ],
          shippingMethods:[
            {required: false, message: "请选择运输方式", trigger: 'change'}
          ],
        },
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      async init() {
        await  activityService.initView().then(resp=>{
          this.transportation=resp.data.result.shippingMethods;
          this.unit=resp.data.result.unit;
        },error => {

        });

      },
      /*确定*/
      submit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = {
              idsStr                    :this.idsStr                          || undefined,
              contractNo                :this.form.contractNo                 || undefined,
              packingDate               :this.form.packingDate                || undefined,
              departureDate             :this.form.departureDate              || undefined,
              billNo                    :this.form.billNo                     || undefined,
              vesselNameVoyage          :this.form.vesselNameVoyage           || undefined,
              port                      :this.form.port                       || undefined,
              destinationPort           :this.form.destinationPort            || undefined,
              shippingMethods           :this.form.shippingMethods            || undefined,
            };

            activityService.updatePackingDetailsList({...data}).then(resp => {  //添加
              if (resp.data.code == "201") {
                this.$notify({message: resp.data.message, type: "success"});
                this.$emit("success");
                this.dialogFormVisible = false
              } else {
                this.$notify({message: resp.data.message, type: "error"});
              }
            })

          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      cancel() {
        this.dialogFormVisible = false
      },
    }
  }
</script>

<style scoped>

</style>